//DOOM文字,火焰特效
import * as THREE from "../node_modules/three/build/three.module.js";
import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js";
//火焰的包
import { Fire } from '../node_modules/three/examples/jsm/objects/Fire'


var scene, camera, renderer, controls
var fire

//火焰参数,参考用,没用到
var params = {
    color1: '#ffffff',
    color2: '#ffa000',
    color3: '#000000',
    colorBias: 0.8,
    burnRate: 0.35,
    diffuse: 1.33,
    viscosity: 0.25,
    expansion: - 0.25,
    swirl: 50.0,
    drag: 0.35,
    airSpeed: 12.0,
    windX: 0.0,
    windY: 0.75,
    speed: 500.0,
    massConservation: false
};

function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(5, 5, 30)
    camera.lookAt(new THREE.Vector3(1, 1, 1))
    scene.add(camera)
    scene.background = new THREE.Color(0x576574);
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    //环境光
    var light = new THREE.AmbientLight(0x404040, 8);
    scene.add(light)

    //鼠标控制器
    controls = new OrbitControls(camera, renderer.domElement);
    controls.update();

}

function createText() {

    var text = "DOOM Salyer";
    var size = 120;
    var color = "#FF0040";
    var canvas = document.createElement("canvas");
    canvas.width = 1024;
    canvas.height = 1024;
    var context = canvas.getContext("2d");
    context.font = size + "pt Arial";

    context.strokeStyle = "black";
    context.strokeRect(0, 0, canvas.width, canvas.height);
    context.textAlign = "center";
    context.textBaseline = "middle";

    context.lineWidth = 5;
    context.strokeStyle = color;
    context.fillStyle = "black";

    context.strokeText(text, canvas.width / 2, canvas.height * 0.75);
    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;

    fire.setSourceMap(texture);
}

function createFire() {
    var plane = new THREE.PlaneBufferGeometry(20, 20);

    var material = new THREE.LineBasicMaterial({
        color: 0xffffff
    });
    var geometry = new THREE.Geometry();
    geometry.vertices.push(
        new THREE.Vector3(-10, 10, 0),
        new THREE.Vector3(10, 10, 0),
        new THREE.Vector3(10, -10, 0),
        new THREE.Vector3(-10, -10, 0),
        new THREE.Vector3(-10, 10, 0),
    );
    var line = new THREE.Line(geometry, material);
    scene.add(line);

    fire = new Fire(plane, {
        textureWidth: 512,
        textureHeight: 512,
        debug: false
    });
    scene.add(fire);
    fire.clearSources();
    //水平位置,垂直位置,半径,(密度,水平风向,垂直风向)可选
    fire.addSource(0.5, 0.1, 0.1, 1.0, 0.0, 1.0);
}


function candle() {
    fire.color1.set(0xffffff);
    fire.color2.set(0xffa000);
    fire.color3.set(0x000000);
    fire.windX = 0.0;
    fire.windY = 0.5;
    fire.colorBias = 0.3;
    fire.burnRate = 1.6;
    fire.diffuse = 1.33;
    fire.viscosity = 1.33;
    fire.expansion = 0.0;
    fire.swirl = 0.0;
    fire.drag = 0.0;
    fire.airSpeed = 8.0;
    fire.speed = 400.0;
    fire.massConservation = false;
};

function torch() {
    fire.color1.set(0xffdcaa);
    fire.color2.set(0xffa000);
    fire.color3.set(0x000000);
    fire.windX = 0.0;
    fire.windY = 0.75;
    fire.colorBias = 0.9;
    fire.burnRate = 1.0;
    fire.diffuse = 1.33;
    fire.viscosity = 0.25;
    fire.expansion = 0.0;
    fire.swirl = 50.0;
    fire.drag = 0.35;
    fire.airSpeed = 10.0;
    fire.speed = 500.0;
    fire.massConservation = false;
};

function campfire() {
    fire.color1.set(0xffffff);
    fire.color2.set(0xffa000);
    fire.color3.set(0x000000);
    fire.windX = 0.0;
    fire.windY = 0.75;
    fire.colorBias = 0.8;
    fire.burnRate = 0.3;
    fire.diffuse = 1.33;
    fire.viscosity = 0.25;
    fire.expansion = - 0.25;
    fire.swirl = 50.0;
    fire.drag = 0.35;
    fire.airSpeed = 12.0;
    fire.speed = 500.0;
    fire.massConservation = false;
};

function fireball() {
    fire.color1.set(0xffffff);
    fire.color2.set(0xffa000);
    fire.color3.set(0x000000);
    fire.windX = 0.0;
    fire.windY = 0.75;
    fire.colorBias = 0.8;
    fire.burnRate = 1.2;
    fire.diffuse = 3.0;
    fire.viscosity = 0.0;
    fire.expansion = 0.0;
    fire.swirl = 6.0;
    fire.drag = 0.0;
    fire.airSpeed = 20.0;
    fire.speed = 500.0;
    fire.massConservation = false;
};

function iceball() {
    fire.color1.set(0x00bdf7);
    fire.color2.set(0x1b3fb6);
    fire.color3.set(0x001869);
    fire.windX = 0.0;
    fire.windY = - 0.25;
    fire.colorBias = 0.25;
    fire.burnRate = 2.6;
    fire.diffuse = 5.0;
    fire.viscosity = 0.5;
    fire.expansion = 0.75;
    fire.swirl = 30.0;
    fire.drag = 0.0;
    fire.airSpeed = 10.0;
    fire.speed = 500.0;
    fire.massConservation = false;
};

function smoke() {
    fire.color1.set(0xd2d2d2);
    fire.color2.set(0xd7d7d7);
    fire.color3.set(0x000000);
    fire.windX = - 0.05;
    fire.windY = 0.15;
    fire.colorBias = 0.95;
    fire.burnRate = 0.0;
    fire.diffuse = 1.5;
    fire.viscosity = 0.25;
    fire.expansion = 0.2;
    fire.swirl = 3.75;
    fire.drag = 0.4;
    fire.airSpeed = 18.0;
    fire.speed = 500.0;
    fire.massConservation = false;
};

//坐标系
function reference() {
    //参考系
    var material1 = new THREE.LineBasicMaterial({ color: 0xd63031 }); //红
    var material2 = new THREE.LineBasicMaterial({ color: 0x55efc4 }); //绿
    var material3 = new THREE.LineBasicMaterial({ color: 0x0984e3 }); //蓝
    var geometry1 = new THREE.Geometry();
    var geometry2 = new THREE.Geometry();
    var geometry3 = new THREE.Geometry();
    let l = 100
    geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry3.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry1.vertices.push(new THREE.Vector3(l, 0, 0));
    geometry2.vertices.push(new THREE.Vector3(0, l, 0));
    geometry3.vertices.push(new THREE.Vector3(0, 0, l));
    var line1 = new THREE.Line(geometry1, material1);
    var line2 = new THREE.Line(geometry2, material2);
    var line3 = new THREE.Line(geometry3, material3);
    scene.add(line1);
    scene.add(line2);
    scene.add(line3);
}

function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera);
}

async function all() {
    init()
    createFire()
    // iceball()
    // candle()
    // torch()
    campfire()
    createText()
    reference()
    animate()
}

all()
